﻿@using HCMS.Extensions
@* 单图上传 *@
@{
    // 图片字段名称
    string fieldName = ViewData["fieldName"].ToString("");
    // 图片路径
    string imgPath = ViewData["imgPath"].ToString("");
}
<button type="button" class="layui-btn" id="upload_img_btn_@fieldName">
    <i class="layui-icon layui-icon-upload"></i> 上传
</button>
<div style="width: 132px;">
    <div class="layui-upload-list">
        <i class="btn-remove layui-icon layui-icon-clear" id="upload_img_remove_@fieldName" title="删除"></i>
        <img class="layui-upload-img hide" id="upload_img_preview_@fieldName" style="width: 100%; height: 92px;">
        <input type="hidden" id="upload_img_input_@fieldName" name="@fieldName" value="@(imgPath)" />
        <div id="upload_img_tips_@fieldName"></div>
    </div>

    <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="upload_img_progress_@fieldName">
        <div class="layui-progress-bar" lay-percent=""></div>
    </div>
</div>

<style>
    .layui-upload-list { position: relative; cursor: pointer; }
        .layui-upload-list:hover .btn-remove { display: inline-block; }
        .layui-upload-list .btn-remove { display: none; position: absolute; top: -12px; right: -11px; width: 20px; height: 20px; font-size: 24px; color: red; cursor: pointer; }
    .layui-upload-img.hide { display: none; }
</style>

<script>
    layui.use(['form', 'jquery'], function () {
        var suffix = '_@fieldName';
        var imgPath = '@imgPath';
        var domain = '@(UrlExt.ImagesDomain)';

        let $ = layui.jquery;
        var layer = layui.layer;
        let upload = layui.upload;
        var element = layui.element;

        setImgInfo(imgPath);
        preview();
        removeImg();
        uploadFn();

        /**
         * 设置图片信息
         * @@param {string} url 图片路径
         */
        function setImgInfo(url) {
            var $preview = $('#upload_img_preview' + suffix);
            if(url){
                $preview.attr({ src: previewUrl(url) }).removeClass('hide');
            } else {
                $preview.attr({ src: '', alt: '暂无图片' }).addClass('hide');
                element.progress('upload_img_progress' + suffix, '0%'); // 进度条复位
            }

            $('#upload_img_input' + suffix).val(url);
        }

        // 预览图 路径处理
        function previewUrl(url) {
            if (url.indexOf(domain) > -1) {
                return url;
            }
            return domain + url;
        }

        // 删除
        function removeImg() {
            $('#upload_img_remove' + suffix).unbind('click').click(function () {
                setImgInfo('');
            });
        }

        // 图片预览
        function preview() {
            $('#upload_img_preview' + suffix).unbind('click').click(function () {
                var url = $(this).attr('src')
                if (!url) { return false; }

                layer.photos({
                    photos: {
                        "title": url,
                        "start": 0,
                        "data": [
                            {
                                "alt": "",
                                "pid": 5,
                                "src": url,
                            }
                        ]
                    },
                    footer: false
                });
            });
        }

        // 上传
        function uploadFn() {
            var uploadInst = upload.render({
                elem: '#upload_img_btn' + suffix,
                url: 'http://localhost:5020/api/upload/imgs/',
                field: 'files',
                before: function (obj) {
                    // 预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#upload_img_preview' + suffix).attr('src', result); // 图片链接（base64）
                    });
                    element.progress('upload_img_progress' + suffix, '0%'); // 进度条复位
                    layer.msg('上传中', { icon: 16, time: 0 });
                },
                done: function (res) {
                    // 若上传失败
                    if (!res.success) {
                        return layer.msg('上传失败：' + res.errorMsg);
                    }
                    // 上传成功的一些操作
                    // …
                    $('#upload_img_tips' + suffix).html(''); // 置空上传失败的状态
                    setImgInfo(res.url);
                    removeImg();
                },
                error: function () {
                    // 失败状态，并实现重传
                    var $tips = $('#upload_img_tips' + suffix);
                    $tips.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    $tips.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                },
                // 进度条
                progress: function (n, elem, e) {
                    element.progress('upload_img_progress' + suffix, n + '%'); // 可配合 layui 进度条元素使用
                    if (n == 100) {
                        layer.msg('上传完毕', { icon: 1 });
                    }
                }
            });
        }
    });
</script>